<template>
	<view class="paymentBox">
		<view class="header">
				<image src="/static/images/success.png" mode=""></image>
				<view class="">
					支付成功
				</view>
		</view>
        <view class="plr16 pt15">
            <view class="bgWhite radius8  plr15 ptb15">
                    <view class="justify-between">
						<view class="flex1 ml10">
							<view class="title ">
								{{detail.title}}
							</view>
						</view>
                    </view>
				
                    <view class="mt10">
                        <view class="mt10 justify-between">
							订单编号：<text> {{detail.orderno||detail.out_trade_no}}</text>
                        </view>
						<view class="mt10 justify-between">
						    报名人信息： <text>{{username}}({{phone}})</text>
						</view>
                        
                        <view class="mt10 justify-between">
                            下单时间：<text>{{detail.create_time}}</text> 
                        </view>
						<view class="mt10 justify-between">
						    活动时间：<text>{{detail.start_date}}</text>
						</view>
						<view class="mt10 justify-between">
						    活动地点：<text>{{detail.address}}</text>
						</view>
						<view class="mt10 justify-between">
						    支付状态：<text>{{detail.pay_status}}</text>
						</view>
                    </view>
            </view>
			
		</view>	
		<view class="justify-between align-center btnbox">
			<view class="cancel" @click="watchOrder">
			    查看订单
			</view>
			<view class="con" @click="continues">
			    继续选购
			</view>
		</view>
        
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				fileList1: [],
                id:"",
                detail:{},
                
                form:{
                    order_id:"",
                    pay_image:""
                },
                imgList:[],
                payImg:"",
				appointer:{},
				orderno:"",
				username:"",
				phone:""
			};
		},
        onLoad(opt) {
            // this.getPayMode()
			if(opt.name) this.username = opt.name
			if(opt.phone) this.phone = opt.phone
            if(opt.orderno){
                this.orderno = opt.orderno
                this.getDetail()
                
                
            }
        },
		methods: {
			orderInfo(){
				this.$api.actCheckOrder({orderno:this.id}).then(res=>{
					console.log(res)
					this.detail=res.data
					this.detail.img_url = operate.api+this.detail.img_url
					// this.appointer = res.appointer
				})
			},
           
			
            async  getDetail(){
              const {data}  = await  this.$api.orderDetails({orderno:this.orderno})
              console.log(data)
             this.detail=data[0]
            
            },
			watchOrder(){
				uni.reLaunch({
					url:'/pages/order/index'
				})
			},
			continues(){
				uni.switchTab({
					url:'/pages/activity/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paymentBox {
		min-height: 100vh;
		color: #666666;
		font-size: 30rpx;
        position: relative;
        .header{
			
			height: 386rpx;
			background: #F3F7FA;
			color:#333;
			text-align:center;
			
			image{
				margin-top: 98rpx;
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 40rpx;
			}
		}
        
	}	
    .actionBox{
        view{
            padding: 12rpx  46rpx;
            border-radius: 86rpx;
            border: 2rpx solid #2CC6A1;
            color: #2CC6A1;
            font-size: 32rpx;
        }
        
    }
		
	.btnbox{
			margin: 62rpx 50rpx;
		view{
			width: 304rpx;
			height: 80rpx;
			font-size: 36rpx;
			color: #0368FF;
			line-height: 80rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 66rpx;
			border: 2rpx solid #0368FF;
		}
			
			
		.con{
			background-color: #0368FF;
			color: #fff;
		}
	}
    
	.title{
		font-size: 32rpx;
		font-weight:600;
        text-align: center;
		margin-bottom: 10rpx;
	}
	.moduleTitle{
	    font-weight: 600;
	    color: #000000;
	    line-height: 54rpx;
	    margin: 30rpx 0 10rpx;
	}
</style>